<template>
    <div ref="scrollContainer" class="scroll-container">
        <table class="data-table">
            <thead style=" text-align: left;background-color: lightcyan">
            <tr>
                <th style="width: 72px;">寄存器</th>
                <th>变量名称</th>
                <th>数值</th>
                <th style="width: 82px;">获取时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>内容行 00</td>
            </tr>
            <tr>
                <td>内容行 01</td>
            </tr>
            <tr>
                <td>内容行 02</td>
            </tr>
            <tr>
                <td>内容行 03</td>
            </tr>
            <tr>
                <td>内容行 04</td>
            </tr>
            <tr>
                <td>内容行 05</td>
            </tr>
            <tr>
                <td>内容行 06</td>
            </tr>
            <tr>
                <td>内容行 07</td>
            </tr>
            <tr>
                <td>内容行 08</td>
            </tr>
            <tr>
                <td>内容行 09</td>
            </tr>
            <tr>
                <td>内容行 10</td>
            </tr>
            <tr>
                <td>内容行 11</td>
            </tr>
            <tr>
                <td>内容行 12</td>
            </tr>
            <tr>
                <td>内容行 13</td>
            </tr>
            <tr>
                <td>内容行 14</td>
            </tr>
            <tr>
                <td>内容行 15</td>
            </tr>
            <tr>
                <td>内容行 16</td>
            </tr>
            <tr>
                <td>内容行 17</td>
            </tr>
            <tr>
                <td>内容行 18</td>
            </tr>
            <tr>
                <td>内容行 19</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {UseMarquee, useMarquee} from "@/widget/use/use-marquee";

/**
 * 带跑马灯效果的表格
 */
interface Props extends /* @vue-ignore */ UseMarquee {
    // 跑马灯速度（像素/秒）
    speed?: number;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    speed: 0.5,
})

// Reference container
const scrollContainer = ref();

// marquee setting
const {bind, unbind} = useMarquee(props);

onMounted(() => {
    bind(scrollContainer.value);
})

onUnmounted(() => {
    unbind();
})

</script>

<style scoped lang="scss">

.data-table {
    width: 100%;
    border-collapse: collapse;

    thead {
        position: sticky;
        top: 0;
    }

    th, td {
        padding: 2px 10px;
    }
}

.scroll-container {
    overflow-y: auto;

    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

/* WebKit 浏览器（Chrome/Safari/Edge）隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
    display: none;
}
</style>